<template>
    <div class="edu-info-demo">
        <a-card :title="title" :bordered="false" >
            <desc-list :col="2">
                <desc-item term="流水号" :labelCol="labelCol">123</desc-item>
                <desc-item term="申请时间" :labelCol="labelCol">2022年2月28日 16:47:16</desc-item>
            </desc-list>
            <desc-list :col="2">
                <desc-item term="申请人" :labelCol="labelCol">xxx</desc-item>
                <desc-item term="申请部门" :labelCol="labelCol">xxxxx</desc-item>
            </desc-list>
        </a-card>
        <a-card :title="title" :bordered="false" >
            <desc-list :col="2">
                <a-button type="primary" icon="plus" @click="addContact()">联系人添加</a-button>
                <a-button style="margin-left: 10px;" type="primary" icon="plus" @click="authOrder">开票退票换票审批</a-button>
            </desc-list>
        </a-card>
        <a-form-model ref="form" :model="info" v-bind="formLayout">
            <a-card title="表单信息" :bordered="false" >
                <a-row>
                    <a-col>
                        <a-form-model-item label="资源内容" prop="fileUrl">
                            <ImgUpload class="img-box" :src="info.fileUrl" :isRequire="true" promptText="主合同（必须上传）" @ok="fileUploadOk($event, 1)" :accept="'*'" :bizType="ResourceBizTypeEnum.ATTACHMENT" ></ImgUpload>
                            <ImgUpload class="img-box" :src="info.fileUrl2" promptText="甲方设计要求" @ok="fileUploadOk($event, 2)" :accept="'*'" :bizType="ResourceBizTypeEnum.ATTACHMENT" ></ImgUpload>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col>
                        <a-form-model-item label="文件Table">
                            <FileTable
                                operWidth="300px"
                                :data="fileList3"
                                :columns="fileColumns2"
                                :bizType="ResourceBizTypeEnum.ATTACHMENT"
                                :scroll="{ x: true }"
                                @click="fileTableClick"
                                @ok="fileTableOk"
                                @del="fileTableDel"
                             >
                             <template #requireFile="record">
                                <span v-html="record.requireFile">
                                </span>
                            </template>
                             </FileTable>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-card>
        </a-form-model>
        <a-card title="学历信息" :bordered="false" >
            <EduInfo v-model="infoList" ref="eduInfo"></EduInfo>
        </a-card>
        <a-card title="异步学历信息" :bordered="false" >
            <EduInfo v-model="infoList2" ref="eduInfo2"></EduInfo>
        </a-card>
        <div class="confirm-box">
            <a-button class="confirm-btn" type="primary" @click="handleOk" >发起并提交</a-button>
        </div>
        <select-contact ref="selectContact"></select-contact>
        <OrderAudit ref="orderAudit"></OrderAudit>
    </div>
</template>
<script>
    import { DescList, DescItem } from '@/appBase';
    import EduInfo from './components/EduInfo';
    import SelectContact from '@/modules/common/components/SelectContact';
    import ImgUpload from '@/modules/common/components/ImgUpload';
    import FileTable from '@/modules/common/components/FileTable';
    import { ResourceBizTypeEnum, AuditStatusEnum } from '@/modules/common/enum/enum';
    import OrderAudit from '@/modules/common/components/OrderAudit';
    const OperBtnKeyEnum = FileTable.OperBtnKeyEnum;

    // 修改页面DEMO
    export default {
        name: "EditDemo",
        components: {
            DescList,
            DescItem,
            EduInfo,
            SelectContact,
            ImgUpload,
            OrderAudit,
            FileTable,
        },
        data() {
            return {
                title: '修改页面DEMO',
                labelCol: {
                    span: 4
                },
                labelCol2: {
                    span: 2
                },
                /** 布局配置 */
                formLayout: {
                    layout: 'horizontal',
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 2 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 17 }
                    }
                },
                infoList: [], // 学历列表
                infoList2: [], // 学历列表
                ResourceBizTypeEnum,
                info: {
                    fileUrl: null,
                    fileId: null,
                    fileUrl2: null,
                    fileId2: null,
                },
                fileList: [],
                fileList2: [],
                fileList3: [],
                fileColumns: [
                    {
                        title: '图纸类型',
                        width: '180px',
                        dataIndex: 'requireFile',
                    },
                    {
                        title: '执行人',
                        width: '180px',
                        dataIndex: 'creator',
                    },
                    {
                        title: '文件名称',
                        dataIndex: 'fileName',
                    },
                ],
                // 自定义的table表头
                fileColumns2: [
                    {
                        title: '附件要求',
                        scopedSlots: { customRender: "requireFile" } // 随便取的一个名字 没有任何意义 可以改成自己的字段key
                    },
                    {
                        title: '文件名称',
                        dataIndex: 'fileName',
                    },
                    {
                        title: '文件大小',
                        dataIndex: 'fileSize',
                    },
                    {
                        title: '上传时间',
                        dataIndex: 'uploadTime',
                    },
                ]
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                // 修改
                this.$nextTick(() => {
                    // 模拟获取接口数据
                    setTimeout(() => {
                        this.infoList2.push({
                            eduLevel: 1,
                            eduType: 1,
                            degree: '初级',
                            degreeLevel: '初级等级',
                            majorName: '小学', 
                            graduationTime: '2021-12-24 00:00:00',
                            graduationSchool: '北京小学',
                        });
                        this.infoList2.push({
                            eduLevel: 7,
                            eduType: 0,
                            degree: '高级',
                            degreeLevel: '高级等级',
                            majorName: '软件工程', 
                            graduationTime: '2022-12-24 00:00:00',
                            graduationSchool: '北京大学',
                        });

                        // 构造文件列表
                        this.fileList.push(...[
                            {
                                key: '1', // 唯一的key用于对比数据用，可不传
                                requireFile: '主合同（必须上传）',
                                required: true, // 为true 则会显示标题前的红星
                                fileName: null,
                                fileId: null,
                                fileUrl: null,
                                uploadTime: null,
                                deleteType: 2,  // 1=删除 2=清除
                            },
                            {
                                key: '2',
                                requireFile: '甲方设计要求',
                                fileName: null,
                                fileId: null,
                                fileUrl: null,
                                uploadTime: null,
                                uploadType: 1, // 上传类型 1=普通上传 2=复制上传
                            },
                            {
                                key: '3',
                                requireFile: '其他',
                                autoAdd: true, // 为true则新增完成后会自动添加一行数据
                                fileName: null,
                                fileId: null,
                                fileUrl: null,
                                uploadTime: null,
                                deleteType: 1, // 1=删除 2=清除
                                uploadType: 1, // 上传类型 1=普通上传 2=复制上传
                            },
                        ]);
                        this.fileList2.push(...[
                            {
                                requireFile: '乔木',
                                creator: '张三',
                                fileName: null,
                                fileId: null,
                                fileUrl: null,
                                uploadTime: null,
                                hideView: true, // 可以控制隐藏某个按钮  hideView=隐藏预览  hideDownload=隐藏下载  hideDelete=隐藏删除
                                hideDelete: true,
                            },
                            {
                                requireFile: '灌木',
                                creator: '李四',
                                fileName: null,
                                fileId: null,
                                fileUrl: null,
                                uploadTime: null,
                            },
                            {
                                requireFile: '附件上传',
                                creator: '王五',
                                autoAdd: true, // 为true则新增完成后会自动添加一行数据
                                fileName: null,
                                fileId: null,
                                fileUrl: null,
                                uploadTime: null,
                                deleteType: 1, // 1=删除 2=清除
                            },
                        ]);
                        this.fileList3.push(...[
                            {
                                requireFile: '<span style="color:red">*</span>主合同（必须上传）',
                                fileName: '测试重复上传',
                                fileId: '123123414',
                                fileUrl: null,
                                fileSize: '120KB',
                                uploadTime: '2022年8月22日',
                                operBtns: [
                                    // label icon 都可以不传, accept可以不传,默认允许所有文件
                                    { key: OperBtnKeyEnum.COPY_UPLOAD, show: true },
                                ],
                            },
                            {
                                requireFile: '甲方设计要求',
                                fileName: '测试文件',
                                fileId: '123123',
                                fileUrl: null,
                                fileSize: '120KB',
                                uploadTime: '2022年8月22日',
                                operBtns: [
                                    // label icon 都可以不传, accept可以不传,默认允许所有文件
                                    { key: OperBtnKeyEnum.UPLOAD, label: '上传文件', icon: 'rise', accept: '.jpg', show: true },
                                    OperBtnKeyEnum.VIEW,
                                    OperBtnKeyEnum.DOWNLOAD,
                                    OperBtnKeyEnum.DELETE,
                                    { key: 'search', label: '自定义按钮', icon: 'zoom-in', show: true },
                                ],
                            },
                            {
                                requireFile: '项目分析条款',
                                fileName: '测试文件2',
                                fileId: null,
                                fileUrl: null,
                                fileSize: '120KB',
                                uploadTime: '2022年8月22日',
                                operBtns: [
                                    { key: 'search', label: '自定义按钮', icon: 'zoom-in', show: true },
                                    OperBtnKeyEnum.UPLOAD,
                                    OperBtnKeyEnum.VIEW,
                                    OperBtnKeyEnum.DOWNLOAD,
                                    OperBtnKeyEnum.DELETE,
                                ],
                            }
                        ]);
                    }, 1000);
                });
            },
            handleOk() {
                const valid = this.$refs.eduInfo.validate();
                console.log(valid);
                // 主动获取数据
                const infoList = this.$refs.eduInfo.getData();
                console.log(infoList);
                const valid2 = this.$refs.eduInfo2.validate();
                console.log(valid2);
                // 双向绑定数据
                const infoList2 = this.infoList2;
                console.log(infoList2);
            },
            // 添加联系人
            addContact() {
                this.$refs.selectContact.show({
                    selectedData: { contactsId: 0 }, // 传了selectedData就会默认选中
                    onOk(res) {
                        console.log(res);
                    },
                });
            },
            // 文件上传成功
            fileUploadOk(val, type) {
                if (type === 1) {
                    this.info.fileUrl = val.fileUrl;
                    this.info.fileId = val.fileId;
                } else if (type === 2) {
                    this.info.fileUrl2 = val.fileUrl;
                    this.info.fileId2 = val.fileId;
                }
            },
            // 文件列表组件点击事件
            fileTableClick(btn, item) {
                console.log(btn);
                console.log(item);
            },
            // 文件列表组件上传成功事件
            fileTableOk(item, fileList) {
                this.fileList3.splice(0);
                this.fileList3.push(...fileList);
            },
            // 文件删除成功
            fileTableDel(item, fileList) {
                this.fileList3.splice(0);
                this.fileList3.push(...fileList);
            },
            // 开票退票换票审批通过
            authOrder() {
                // 审批
                this.$refs.orderAudit.show({
                    type: AuditStatusEnum.RESOLVE,
                    authType: 2, // 2=开票退票换票审批
                    // 审批需要的参数
                    authParam: {
                        actualAmount: 0,
                        bizId: 0,
                        invoiceNoRemark: '',
                        invoiceNum: 0,
                        returnInvoiceNoRemark: '',
                        returnInvoiceNum: 0,
                        type: 0
                    },
                    onOk: () => {
                    }
                });
            },
        }
    }
</script>
<style lang="less">
    .edu-info-demo {
        .confirm-box {
            text-align: center;
            .confirm-btn {
                margin: 0 4px;
            }
        }
        .img-box {
            margin: 0 10px;
        }
    }
</style>